Prototyping is a must for every UX/UI designer, software engineer, and especially every client who wants a design process to be collaborative, productive, and eventually successful. To do so, one needs to ensure clarity of requirements from the very beginning. Evidently, the client needs to get a grasp on what an app or a website will look like, what high-level features they should expect, and whether it is certain to match all the set specifications yet before the full-scale development process is launched. In such a case, prototyping is a perfect solution since prototypes are simulations that contribute to achieving goals set and solving problems defined during the design sprints. If in doubt whether or not your product may need prototyping and what actually for, rest assured that such simulations are likely to be of benefit both to the client and the contractor. Thus, we suggest figuring out together why it is so and why prototyping is necessary.
What is a prototype?
Prototyping, modeling, simulating — you name it. This process in its essence is open to various interpretations. Among other things, prototyping may be addressed as the practical implementation of the findings of a discovery phase in design development. It is important for prototyping to be executed in the context of design thinking.
Design thinking is a problem-solving process of submitting and implementing ideas in order to eventually make customers satisfied. And user satisfaction is the primary goal of the UX/UI design. Referring to the method of design thinking seems quite natural when trying to explain prototyping for, as we have already articulated in our previous article on enhancing User Interface with illustrations, the user-centered design is the key and what should focus on it but the design thinking method. In this respect, a prototype is that sample which the client needs in order to check whether the requirements are fully understood and can be completely fulfilled. Thus, the development of a sample of a website or an application is meant to result in participation and active engagement of everyone in meaningful experiences. Consequently, addressing an issue of prototyping may lead to productive and profitable interaction of users with the end product.
Benefits of prototyping
As one might guess (and it is not entirely without the foundation), prototypes can sometimes go beyond just being mock user interfaces. But what are the benefits of prototyping? These advantages are aplenty and they include doing the following:
1. Shaping your ideas.
Despite our focus on the production of software products, we should say that prototyping stands a good chance of improving any creative process, which always starts with the idea. This is where you start your journey from an idea to a prototype. Bearing in mind that the endpoint of the process is a whole new product, it has to be taken seriously at every stage. At the stage of ideation, if any, everybody is free to make their suggestions meant to contribute to the generation of a high-quality design that resolves specified problems.
Ideation, or the process of generating a lot of ideas, emphasizes quantity instead of quality. Yet, as a result of asking as many right questions as possible, one can get clean and simple pre-prototyping ideas formed and speed up the progress. However, ideation promotes parallel design and in the case of opting for the iterative method, can be changed for shaping only one idea at a time.
2. Communicating ideas to have them meet the client’s business objectives.
A prototype does not need to be complete. In fact, it is natural for prototypes to be seriously incomplete. Nevertheless, with a view to creating one, it is still more than possible to build a productive dialogue with the client to reach a consensus regarding how the whole process will be running and whether the contractor and the client are in complete accord picturing UX/UI design of an application or a website.
3. Coming up with the solutions quickly.
The pace of life accelerates, as does the speed with which solutions must be generated. The good news is that prototypes are created as quick versions of real things. Therefore, by means of prototyping within the framework of design thinking that favors rather acting than over-thinking, ideas will rapidly turn into solutions. Production of low-fidelity versions is fast and inexpensive. By using such a way of structuring creative group work, one can get everyone involved in creating a proximation of a design to quickly get feedback. It also contributes to a faster process of innovation.
4. Building a bridge between designers and software engineers.
Sure enough, a prototype gives a client an idea of how an end product will work and, in doing so, it improves relationships between a client and a contractor. This advantage has time and again been emphasized above. However, in addition to its being a rudimentary working sample or just a mere simulation, a prototype fulfills the role of a bridge between design and development since it must contain all the features necessary (the number of wichs always varies) to test an idea. Both software engineers and designers introducing the prototype need to communicate their own understanding of these features.
5. Making correct estimates.
When the bridge is being built, the approximate size and characteristics of a product are specified. Yet, prototyping allows improving accuracy and eliminating ambiguities in defining the relative effort that will be required and material costs that shall be incurred. With prototyping, one will be able to estimate development costs, timescale and skill/resource requirements much more precisely testing afterward an idea that is in their heads transitioning through levels of the prototype’s fidelity even if a timeframe and a budget are limited.
6. Reducing risks and uncertainty.
Obtaining the new knowledge that will let you avoid wasting your design process and increase chances to succeed must be the primary objective of the creation of the prototypes. This new information may or may not signal that the prototype is ready to be moved into the production phase. In point 4, we have discussed that prototyping enables defining the needed features but they still comprise nothing but a draft. A prototype, whether lo-fi or hi-fi, does not have to be a fully configured product. This, in turn, reduces risks if compared to heading towards fully functional product development and provides contractors with “a safety net.” Besides, when in pursuit of reducing/eliminating uncertainty, prototyping should prove useful provided that it is empowered with such measures as design analysis, modeling, empirical testing, and stimulation.
7. Testing usability.
The design has its greatest impact when it is handed over from designers to everyone else. At this point, it does make sense to return to the subject of iterative and parallel design processes. As Steven Dow, a postdoctoral scholar in the HCI Group at Stanford, claims in his article, a parallel approach leads to better results. He explains that when group members share multiple concepts as opposed to sharing only their best ideas, dynamics occur bringing the benefits of faster time-to-market. When multiple alternatives are created in parallel, designers offer more diverse solutions. It also let them avoid attaching themselves too much to one idea and investing in it emotionally. Eventually, they are able to give more critical and candid feedback on it.
However, some people argue that a really good design must follow an iterative process for it helps to refine the idea by getting feedback on every improved variant of a prototype embodying a single (and the only generated) idea.
Wireframes, mockups, and prototypes
Talking about prototyping, we cannot but admit that sometimes, terminology appears to be confusing and this is exactly the case. The terms wireframes, mockups, and prototypes are quite often used interchangeably. Besides, the first two are sometimes considered to be steps to building a prototype. So, let’s make a distinction.
1. Wireframes.
A thorough preparation (ideation and information accumulation) is essential for running a successful design sprint. Yet, creating wireframes is usually the first practical step after getting through the discovery phase in the design process. In other words, a wireframe can be referred to as a low-fidelity layout design of the product’s components.
Wireframes are drafts of final products presenting the general scheme of future apps and sites. They are used to outline the main idea and communicate the key concepts. Although wireframes may differ in a degree of detail, they have to reflect the basic look of the app or site for a client to grasp the essence and to understand what he or she is about to pay for. A wireframe does not comprise many details. It has to be arranged in such a way to persuade a customer to continue cooperation and requires a formal style of presentation. As much feedback must be collected, at this stage, as possible in such a short period of time as reasonably practicable.
Components wireframes are built of: such important elements of a user interface as the intended placement of buttons, taps, icons, and others.
2. Mockups.
People are still at odds over singling out mockups as a separate type. Yet, we agree with those who consider them an updated version of wireframes and so-called non-clickable prototypes. Looking at the mockups, one is likely to feel both how the elements are being arranged and see them in more detail. If wireframes are schemes, then mockups are static representations of final products. They are already not only blueprints but the finished looks of the applications and websites.
Components mockups are built of: images on the side, icon forms, colors, intervals, gaps, wording, terminology, button names, fonts (their sizes and types), a common theme, etc.
3. Clickable prototypes.
These are not static pictures anymore. Clickable prototypes are interactive high-fidelity models that show particular results depending on what actions have been taken. They should be very close to real applications or sites representing real data, animations and all as well as showing how users might interact with the product. Given clickable prototypes, it is easier to define what to do to optimize the user experience. That is why the quality of user research matters a lot at this stage.
Components prototypes are built of: various interactive elements that are combined to form a visual hierarchy and information architecture.
Conclusion
If you need a clear understanding of what is what, it is UX/UI prototypes that will give you enough of the appearance and function of the end product. Prototyping allows elaborating and testing an idea or ideas before putting energies into a full-scale development process.
No matter whether you are inclined to have it iterative or parallel, make a wireframe first or start with a clickable prototype, all these options will result in a more logical order of ideas and activities. Subsequently, the process of product development will be more efficient. So, temper your doubts and get to prototyping for the sake of great future user interfaces and experiences!
© 2019, Vilmate LLC
